<style lang="less" scoped>
    @import './third_layer.less';
</style>
<template>
    <div ref="filterItemArea">
        <Row type="flex" align="middle">
           <div class="border_index">{{subscript}}</div>
           <span class="That" style="margin-right:5px;margin-top:5px;">在</span>
            <DatePicker type="daterange" :options="timeConfig" v-model="time" placement="bottom-end" placeholder="请选择起始日期" :transfer="true" style="width:179px;margin-top:5px;"></DatePicker>
            <Select :transfer="true" v-model="doThis" placeholder="请选择条件"  style="width:70px;margin:5px 5px 0 5px">
                <Option v-for="(item,index) in Do" :value="item.key" :key="index">{{item.value}}</Option>
            </Select>
            <Select v-model="AttributeValue" placeholder="请选择用户行为" :transfer="true" filterable  style="width:100px;margin-top:5px;">
                <Option v-for="(item,index) in AttributeValueList" :value="item.value" :key="index">{{item.displayName}}</Option>
            </Select>
            <span v-if="doThis == '1'" class="That" style="margin:5px 5px 0 5px;">的</span>
            <Cascader :data="moreSel" :clearable="false" v-model="search_sel" change-on-select :transfer="true" style="width:100px;margin-top:5px;"></Cascader>
            <span v-if="showday" class="That" style="margin-left:5px;margin-top:5px;">天数</span>
            <Col v-if="doThis == '1'" :xs="3" :sm="3" :md="3" :lg="3"  :style="showday ? 'margin-left:0;margin-top:5px;' : 'margin-left:5px;margin-top:5px;'">
                <Select v-model="judgeed" placeholder="判断" :transfer="true" filterable   >
                    <Option v-for="(item,index) in judge" :value="item.key" :key="index">{{item.value}}</Option>
                </Select>
            </Col>
            <!-- 区间的内容 BEGIN -->
            <InputNumber v-if="Section" v-model="SectionStart" style="margin: 5px 5px 0 5px;"></InputNumber>
            <span v-if="Section" class="That" style="margin: 5px 5px 0 0px;">至</span>
            <InputNumber v-if="Section"  v-model="SectionEnd" style="margin: 5px 5px 0 5px;"></InputNumber>
            <!-- 区间的内容 END -->    

            <!-- 总次数and天 BEGIN -->
            <InputNumber v-if="doThis == '1' && judgeed!='A'" v-model="numday" style="margin-top:5px;margin-left:5px;"></InputNumber>
            <span v-if="doThis == '1'" class="That" style="margin-left:5px;margin-top:5px;">{{showday==true?'天':'次'}}</span>
            <!-- 总次数and天 END 次-->

            <Col  style="margin-left:5px;margin-top:5px;">
                <Button icon="ios-remove" v-on:click='delFirst(subscript)'></Button>
                <Button v-if="sublength == subscript"  icon="ios-add-circle-outline" v-on:click="addThird(subscript)"></Button>
            </Col>
            
        </Row>
    </div>
</template>
<script>

export default {
  data() {
    return {
        time:[new Date(),new Date()],
        doThis:'1',//是否做过
        showday:'',//是否展示天数
        SectionStart:Number(),
        SectionEnd:Number(),
        numday:Number(),
        Section:'',
        Attribute:'',
        condition:'',
        judgeed:'≥',
        AttributeValueList:[],
        AttributeValue:'share',
        search_sel:['allnumber']
    }
  },
  props:['createdConfig','userAttribute','subscript','sublength'],
  mounted(){
     this.getAttributeValue();
  },
  computed:{
    /**
     * 时间组建的配置条件
     */
    timeConfig(){
        let option = {
            shortcuts: [
                {
                    text: '一周',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        return [start, end];
                    }
                },
                {
                    text: '一个月',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        return [start, end];
                    }
                },
                {
                    text: '三个月',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        return [start, end];
                    }
                }
            ]
        }
        return option;
    },
    /**
     * 做过还是没做过
     */
    Do(){
        return [
            {
                key:'1',
                value:'做过'
            },{ 
                key:'0',
                value:'未做过'
            }
        ]
    },
    /**
     * 多级筛选筛选条件
     */
    moreSel(){
        return [{
            value: 'allnumber',
            label: '总次数'
        },{
            value: 'distribution',
            label: '分布'
        },{
            value: 'ScreenWidth',
            label: '屏幕宽度',
            children: [{
                    value: 'TheSum',
                    label: '总和'
                },
                {
                    value: 'meanValue',
                    label: '均值'
                },
                {
                    value: 'Maximum',
                    label: '最大值'
                },
                {
                    value: 'minimumValue',
                    label: '最小值'
                }
            ]
        }, {
            value: 'ScreenHeigth',
            label: '设备高度',
            children: [{
                    value: 'TheSum',
                    label: '总和'
                },
                {
                    value: 'meanValue',
                    label: '均值'
                },
                {
                    value: 'Maximum',
                    label: '最大值'
                },
                {
                    value: 'minimumValue',
                    label: '最小值'
                }
            ],
        }]
    },
    /**
     * 判断条件
     */
    judge(){
        return [
            {
                key:'=',
                value:'='
            },{ 
                key:'≠',
                value:'≠'
            },{ 
                key:'<',
                value:'<'
            },{ 
                key:'≤',
                value:'≤'
            },{ 
                key:'>',
                value:'>'
            },{ 
                key:'≥',
                value:'≥'
            },{ 
                key:'A',
                value:'区间'
            },{ 
                key:'topn',
                value:'TOP N'
            }
        ]
    }
  },
  methods: {
    /**
     * 属性值查询方法
     */
    getAttributeValue(){
        // this.$axios.get(this.$api.report + "/analysis/user/property/"+this.Attribute+"/value", {
        //     headers: {
        //         "Authorization": "Bearer "+this.$sessionStore.fetch(),
        //         "Accept": "application/json"
        //     },
        //     params: {
        //         projectId: this.$store.state.projectId
        //     }
        // }).then(response => {
        //     if (response.status === 200) {
        //         this.AttributeValueList = response.data;
        //     }
        // })
        // .catch(error => {
        //     console.log(error);
        // });
        this.AttributeValueList = [
            {
                "value": "web",
                "displayName": "web元素点击"
            },{
                "value": "webpv",
                "displayName": "web浏览页面"
            },{
                "value": "webstop",
                "displayName": "web市区停留"
            },{
                "value": "share",
                "displayName": "分享商品"
            },{
                "value": "Coupon",
                "displayName": "优惠券操作"
            },{
                "value": "cancel",
                "displayName": "取消订单"
            },{
                "value": "search",
                "displayName": "搜索"
            }
        ]
    },
    /**
     * 删除父级筛选方法
     */
    delFirst(subindex){
        this.$parent.delSecond(subindex);
    },
    /**
     * 变成自己同时存在两个
     */
    addThird(subscript){
        // console.log(subscript,'subscript')
        this.$parent.addSecond(subscript);
    }
  }
}

</script>

